<html>

<head>
    <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>03-加载geojson</title>
    <script src="../../../assets/ol/v5.3.0/ol.js"></script>
    <script src="../../../assets/script/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="../../../assets/ol/v5.3.0/ol.css">
    <link rel="stylesheet" href="../../../assets/css/index.css">
    <style>
        #map {
            width: 80%;
            height: 800px;
        }
    </style>
</head>

<body>
    <div class="control-div">
        <input type="button" class="control-btn" id="zoom-out" value="单击缩小" />
        <input type="button" class="control-btn" id="zoom-in" value="单击放大" />
        <input type="button" class="control-btn" id="panto" value="平移" />
        <input type="button" class="control-btn" id="restore" value="复位" />
        <input type="button" class="control-btn" id="loadGeoJson" value="加载GeoJSON" onclick="loadGeoJSON()" />
    </div>
    <div id="map"></div>
    <script src="../../../assets/script/v5.3.0-common.js"></script>
</body>
<script>
    loadTdtMapLayer();
    let vectorLayer = null
    function loadGeoJSON() {
        // 移除已有图层
        if (vectorLayer != null || vectorLayer != 'undefined') {
            map.removeLayer(vectorLayer)
        }
        const vectorSource = new ol.source.Vector({
            url: "../../../data/230000.geoJson",
            format: new ol.format.GeoJSON()
        })
        vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            // 设置样式
            style: styleFunction
        })

        map.addLayer(vectorLayer)
        var view = map.getView();
        // 移动到矢量图层
        view.setCenter([12536865.056410152, 3635008.742201894]);
    }
</script>

</html>